<template>
  <div
    class="collect-box fx-sk pd-24 bg-fff bd-rd-12 mg-bt-16"
    :class="{ 'empty-status': checkIsEmpty }"
  >
    <div class="fx-bt-ct">
      <div class="line-title">我的收藏</div>
      <div
        class="fx-ct-ct cs-pt"
        @click="isEdit = !isEdit"
        v-show="collectMenus.length"
      >
        <div class="ft-14 cr-pm pd-rt-4">{{ isEdit ? "保存" : "编辑" }}</div>
        <img class="ic-12" v-if="isEdit" src="@/assets/icons/save_1.png" />
        <img class="ic-12" v-else src="@/assets/icons/edit_1.png" />
      </div>
    </div>
    <div
      class="menu-list fx-ag-ct of-hd mg-lt--8 pd-lf-8"
      v-if="collectMenus.length"
    >
      <el-scrollbar>
        <div
          v-for="(item, index) in collectMenus"
          :key="index"
          class="collect-item fx-ct-ct fx-cl mg-rt-8 pd-8 cs-pt ts-al bd-rd-8"
          @click="jumpHandle(item)"
        >
          <div class="ps-rl">
            <img
              v-show="isEdit"
              @click.stop="removeHandle(item)"
              class="ic-12 ps-as ps-tp--3 ps-rt--3"
              src="@/assets/icons/close_3.png"
            />
            <img
              class="ic-40"
              :src="getMenuImage(item)"
              @error="onErrorHandle"
            />
          </div>
          <div class="ft-14 cr-bk-9 tx-ct fw-600 mg-tp-8 wd-84 of-np">
            {{ item.menuName }}
          </div>
        </div>
      </el-scrollbar>
    </div>
    <div
      class="recommend-list fx-ct-ct bg-f8 bd-rd-4 mg-tp-16"
      v-if="recommonMenuList.length"
    >
      <div class="recommend-icon"></div>
      <div class="recommend-right fx-full fx-ag-ct of-hd pd-lf-12">
        <div
          v-for="(item, index) in recommonMenuList"
          :key="index"
          class="recommend-item fx-ct-ct mg-rt-16 cs-pt bg-fff ht-20 bd-rd-4 ts-al"
          @click="jumpHandle(item)"
        >
          <img class="ic-20" src="@/assets/common/menu_df.png" />
          <div class="ft-12 mg-lt-8 cr-bk-6 fw-600 wd-68 of-np pd-rt-8 lh-18">
            {{ item.menuName }}
          </div>
        </div>
      </div>
    </div>
    <div class="fx-ct-ct fx-full" v-if="checkIsEmpty">
      <img src="@/assets/common/empty_icon.png" class="empty-table-img" />
    </div>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
export default {
  name: "collectBox",
  computed: {
    ...mapGetters(["collectMenus", "recommonMenuList"]),
    checkIsEmpty() {
      return !this.collectMenus.length && !this.recommonMenuList.length;
    },
  },
  data: () => ({
    isEdit: false,
  }),
  methods: {
    jumpHandle(item) {
      if (this.isEdit) return;
      if (item.menuId) this.$store.dispatch("SaveMenuInClick", item.menuId);
      if (item.path) this.$router.push(item.path);
    },
    removeHandle(item) {
      if (item.menuId) this.$store.dispatch("RemoveMenuInCollect", item.menuId);
    },
    getMenuImage(item) {
      let targetUrl = process.env["VUE_APP_MENU_URL"];
      return `${targetUrl}${item.source}.png`;
    },
    onErrorHandle(event) {
      event.currentTarget.src = require("@/assets/common/menu_df.png");
      return true;
    },
  },
};
</script>

<style lang="scss" scoped>
.empty-status {
  height: 216px;
  display: flex;
  flex-direction: column;
}
.recommend-icon {
  width: 115px;
  height: 34px;
  background: url("~@/assets/common/recommend.png");
  background-size: cover;
  flex-shrink: 0;
}
.collect-item {
  &:hover {
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.09);
  }
}
.recommend-item {
  border: 1px solid #f8f8f8;
  overflow: hidden;
  &:hover {
    border: 1px solid $main-color;
  }
}
::v-deep.el-scrollbar {
  .el-scrollbar__view {
    padding: 8px 0;
    display: flex;
    align-items: center;
  }
  .el-scrollbar__wrap {
    overflow-x: hidden !important;
  }
  .el-scrollbar__bar.is-horizontal {
    height: 3px;
    bottom: 0;
  }
}
</style>
